<template>
  <view>
    <u-popup :show="show" mode="center" :round="10" closeable @close="cnecelLogin" :safeAreaInsetBottom="false">
      <view class="big_box">
        <view class="title">您尚未登录,请登录！</view>
        <view class="title_sub">登录体验更好的服务!</view>
        <!-- <button v-if="!isAndroid" class="login_btn btn" @click="getUserProfile">
          微信用户登录
        </button> -->
        <!-- <button
          class="login_btn"
          open-type="getUserInfo"
          @getuserinfo="getUserInfo"
        >
          微信用户登录
        </button> -->
        <!-- {{ isAndroid }} -->
        <view class="btn_box">
          <button class="photo_login_btn btn" :class="{ isAndroid: isAndroid }" open-type="getPhoneNumber"
            @getphonenumber="decryptPhoneNumber">
            手机号一键登录
          </button>
          <button class="photo_login_btn login_btn2 btn" :class="{ isAndroid: isAndroid }" v-if="!checkedVal || !canLogin"
            @click.stop="isReadRuls">
            手机号一键登录
          </button>
        </view>
        <!-- <view @click="cnecelLogin" class="cnecelLogin btn">取 消</view> -->
        <view class="radio_box">
          <u-checkbox-group>
            <u-checkbox activeColor="#de4141" @change="change"></u-checkbox>
          </u-checkbox-group>
          <view>
            我已阅读、理解并同意此<text class="policy" @click="openRules">《隐私政策》</text>。</view>
        </view>
        <RulesCompany ref="rule"></RulesCompany>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { UserLogin } from '@/mixins/UserLogin'
export default {
  mixins: [UserLogin], // 混入
  name: 'UserLoginModal',
  props: {
    costomBack: Boolean
  },
  data() {
    return {}
  },
  created() {
    this.getCode()
  },
  computed: {
    ...mapState(['isAndroid'])
  },
  methods: {
    ...mapMutations(['saveLoginInfo']),
    isShow() {
      this.show = true
    },
    cnecelLogin() {
      this.show = false
      if (this.costomBack) {
        this.$emit('costomBack')
      } else {
        // 返回上一级
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.big_box {
  width: 580rpx;
  padding: 30rpx 30rpx 50rpx 30rpx;
  text-align: center;

  .title {
    line-height: 50rpx;
    // color: #fafafa;
    font-weight: 600;
    font-size: 32rpx;
  }

  .title_sub {
    line-height: 80rpx;
    font-size: 28rpx;
    color: #999;
  }
}

.slot-content {
  width: 100%;
}

.btn {
  margin-bottom: 40rpx;
  border-radius: 200rpx;
  width: 90%;
  font-size: 28rpx;
}

// .cnecelLogin {
//   // background: #ccc;
//   // width: 60%;
//   border-radius: 0rpx;
//   text-align: center;
//   padding: 15rpx 0;
//   line-height: 70rpx;
//   // color: #fafafa;
//   font-weight: 600;
//   font-size: 30rpx;
//   margin: 0 auto;
//   border-top: #eee solid 1px;
// }
.login_btn {
  // margin-top: 60rpx;
  background: #dd444c;
  color: #fff;
}

.photo_login_btn {
  // background: #fff;
  // color: #000;
  background: #dd444c;
  color: #fff;

  &::after {
    border: 2rpx solid rgba(0, 0, 0, 0.2);
    border-radius: 200rpx;
  }
}

.isAndroid {
  color: #fff;
  background: #dd444c !important;
}

.btn_box {
  position: relative;

  .login_btn2 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

// 规则
.radio_box {
  color: #aaa;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
}

.policy {
  color: #dd444c;
}
</style>
